<html>
  <head>
  	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>码云</title>
    <link rel="stylesheet" type="text/css" href="js/jquery-ui-1.10.4/css/base/jquery-ui-1.10.4.custom.min.css" />
  	<link rel="stylesheet" type="text/css" href="js/style.css">
  	<script type="text/javascript" src="js/jquery-ui-1.10.4/js/jquery-1.10.2.js"></script>
  	<script type="text/javascript" src="js/jquery-ui-1.10.4/js/jquery-ui-1.10.4.custom.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.10.4/development-bundle/ui/i18n/jquery-ui-i18n.min.js"></script>
  	<script type="text/javascript" src="js/jquery-ui-1.10.4/development-bundle/ui/i18n/jquery.ui.datepicker-zh-CN.js"></script>
	<style>
  		.span{
  			color:#C0C0C0
  		}
  		html{
  			height:200%;
  			overflow:scroll;
  		}
  		#accordion{
  			background-color: #FFFFFF
  		}
  		#tabs{
  			position: absolute;
  			left:150px;
  			border-color: #F5F5F5
  		}
  		body{
  			background-color: #F5F5F5 
  		}
  		.ui-tabs {
		    padding: 0
		}
  		.ui-tabs .ui-tabs-nav {
		    margin: 0;
		    padding: 0 0 0
		}
		.ui-widget-header {
		    border: 0px solid #FFFFFF;
		    background: #F5F5F5;
		}
  		#tabs ul li a {
  			display:block;
  			padding: 17px 30px;
  			background: #F5F5F5;
  			text-decoration: none;
  			color:#696969
  			}
  		#tabs ul li.ui-tabs-active a {
  			background:#F5F5F5;
  			color: #655c89;
  			outline:none;
  			border-bottom: 1px solid red
  			 }
  		.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
		    border: 0px solid #FFFFFF;
		    background: #FFFFFF;
		    font-weight: normal;
		    color: #000000
		}
		.ui-widget-content {
		    border: 1px solid #FFFFFF;
		    background: #FFFFFF;
		    color: #9955FF 
		}
		.ui-state-default{
			color: #9955FF
		}
		#submit
		{
			color: #FFFFFF;
			background-color: #FF4500;
			height: 40px;
			width: 100px;
			font-size: 15px;
			font-family: YouYuan;
			font-weight: 900;
			text-align: center;
			position: absolute;
			margin-left: 850px;
			margin-top: -50px
		}
		#xian{
			border: 0px solid #FFFFFF
		}
		
		#lichengbei{
			border: 1px solid #DCDCDC;
			width:645px;
			height:1000px;
			position:relative;
			margin-top:-16px;
			margin-left:282px;
			background-color: #FFFFFF
		}
		#feedback { font-size: 0.9em; }
		  #selectable .ui-selecting { background: #FFFFFF; }
		  #selectable .ui-selected { background: #FFFFFF; color: 9900FF ; }
		  #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
		  #selectable li { margin: 3px; padding: 0.3em; font-size: 0.9em; height: 15px; width: 130px;}
		 .h4{
		 	color: #444444;
		 	font-family:微软雅黑
		 }
		 table{
		 	border:#C0C0C0 1px solid;
		 	border-collapse:collapse;
		 	width: 568px
		 }
		 td{
			 border:#C0C0C0 1px solid;
			 height:20px;
			 font-size: 14px;
			 text-align: left
		 }
    </style>
    <script type="text/javascript">
		$(function() {
		   	$( "#accordion" ).accordion({
		      collapsible: true
		    });
		});
		$(function() {
			$( "#tabs" ).tabs();
		});
		$(function() {
		    $( "#sortable1" ).sortable().disableSelection();
		    var $tabs = $( "#tabs" ).tabs();
			var $tab_items = $( "ul:first li", $tabs ).droppable({
				accept: ".connectedSortable li",
				hoverClass: "ui-state-hover",
      			drop: function( event, ui ) {
			        var $item = $( this );
			        var $list = $( $item.find( "a" ).attr( "href" ) ).find( ".connectedSortable" );
        			ui.draggable.hide( "slow", function() {
	          			$tabs.tabs( "option", "active", $tab_items.index( $item ) );
	          			$( this ).appendTo( $list ).show( "slow" );
        			});
      			}
    		});
  		});
  		$(function() {
			$( "#selectable" ).selectable();
		});
		$(function() {
			$( "input[type=submit]").button().click(function( event ) {
        		event.preventDefault();
			});
		});
		$(function(){
		  	$("#get").textbox({
				buttonText:'GET',
				buttonAlign:'left'
			});
		});
  	</script>
  	</head>
    <body class="easyui-layout" style="width: 500px;height: 600px;" >   
    <div data-options="region:'north',title:'码云 Developer',split:true" style="height:100px;"></div>   
    <div data-options="region:'center'" style="height:500px;" >
    	<div id="tabs" style = "height:100%;">   
    	<div id="xian" >
		    <ul>
			    <li style = "border:none;"><a href="#tabs-1">API文档</a></li>
			    <li style = "border:none;"><a href="#tabs-2">OAuth文档</a></li>
			</ul>
			<input  id="submit" value="申请授权"/>
		</div>
			<div id="tabs-1" style="width: 225px;">
			    <div id="accordion" style="position: absolute;">
				  <h3 class="h3" >动态通知&nbsp;&nbsp;&nbsp;&nbsp;<span class="span">Activity</span></h3>
				  <div>
				  </div>
				  <h3 class="h3">代码片段&nbsp;&nbsp;&nbsp;&nbsp;<span class="span">Gists</span></h3>
				  <div>
				  </div>
				  <h3 class="h3">lssues相关&nbsp;&nbsp;&nbsp;&nbsp;<span class="span">Lssues</span></h3>
				  <div>
				    
				  </div>
				  <h3 class="h3">标签&nbsp;&nbsp;&nbsp;&nbsp;<span class="span">Labels</span></h3>
				  <div>
				  </div>
				  <h3 class="h3">里程碑&nbsp;&nbsp;&nbsp;&nbsp;<span class="span">Milestones</span></h3>
				  <div>
				  	<ol id="selectable">
					  <li class="ui-widget-content">获取项目所有里程碑</li>
					  <li class="ui-widget-content">创建项目里程碑</li>
					  <li class="ui-widget-content">删除项目单个里程碑</li>
					  <li class="ui-widget-content">获取项目单个里程碑</li>
					  <li class="ui-widget-content">更新项目里程碑</li>
					</ol>
				  </div>
				  <h3 class="h3">杂项&nbsp;&nbsp;&nbsp;&nbsp;<span class="span">Miscellaneous</span></h3>
				  <div>
				  </div>
				  <h3 class="h3">组织相关&nbsp;&nbsp;&nbsp;&nbsp;<span class="span">Organizations</span></h3>
				  <div>
				  </div>
				  <h3 class="h3">PR操作&nbsp;&nbsp;&nbsp;&nbsp;<span class="span">Pull Requests</span></h3>
				  <div>
				  </div>
				  <h3 class="h3">项目仓库&nbsp;&nbsp;&nbsp;&nbsp;<span class="span">Repositories</span></h3>
				  <div>
				  </div>
				  <h3 class="h3">用户账号&nbsp;&nbsp;&nbsp;&nbsp;<span class="span">Users</span></h3>
				  <div>
				  </div>
				</div> 
				<div id="lichengbei">
					<div >
						<div style="position:relative;margin-top: 30px;margin-left: 30px;">
							<h3 style="color: #000000;">获取项目所有里程碑</h3>
							<button style="height: 35px;width: 60px;color: #00DD00; ">get</button>
							<input id="get" type="text" style="height: 35px;width:500px;
							 background-color: #F5F5F5;
							 border-color: #C0C0C0;"> 
						</div>
						<div style="position: relative;margin-left: 30px;border: 1px solid #FFFFFF ;">
							<h4 class="h4">Response Class</h4>
								<table>
									<tr style="background-color:#F5F5F5 ;color: #C0C0C0 ;">
										<td>Parameter</td>
										<td>Value</td>
										<td>Description</td>
										<td></td>
										<td>Data Type</td>
									</tr>
									<tr >
										<td>acess_token</td>
										<td><input type="text"/></td>
										<td>用户名(username/login)</td>
										<td>query</td>
										<td>string</td>
									</tr>
									<tr>
										<td>owner</td>
										<td><input type="text"/></td>
										<td>项目路径(path)</td>
										<td>path</td>
										<td>string</td>
									</tr>
									<tr>
										<td>repo</td>
										<td><input type="text"/></td>
										<td></td>
										<td>query</td>
										<td>string</td>
									</tr>
									<tr>
										<td>state</td>
										<td><input type="text"/></td>
										<td></td>
										<td>query</td>
										<td>integer</td>
									</tr>
									<tr>
										<td>sort</td>
										<td><input type="text"/></td>
										<td></td>
										<td>query</td>
										<td>string</td>
									</tr>
									<tr>
										<td>direction</td>
										<td><input type="text"/></td>
										<td></td>
										<td>query</td>
										<td>integer</td>
									</tr>
									<tr style="border-bottom: 1px solid #FFFFFF;border-right: 1px solid #FFFFFF;">
										<td style="border-bottom: 1px solid #FFFFFF;
										border-left: 1px solid #FFFFFF;border-right:1px solid #FFFFFF;padding-top: 10px;">
										<input type="button" value="测试" style="border-color:#FF4500;color: #FF4500;background-color: #FFFFFF; "/>
										<input type="button" value="收起" style="border-color: #FFFFFF;background-color: #FFFFFF;"/></td>
									</tr>
								</table>
						</div>
						<div style="position: relative;margin-left: 30px;border: 1px solid #FFFFFF ;">
							<h4 class="h4">Curl</h4>
							<input id="get" type="text" style="height: 35px;width:500px;"> 
						</div>
						<div style="position: relative;margin-left: 30px;border: 1px solid #FFFFFF ;">
							<h4 class="h4">Request URL</h4>
							<input id="get" type="text" style="height: 35px;width:500px;"> 
						</div>
						<div style="position: relative;margin-left: 30px;border: 1px solid #FFFFFF ;">
							<h4 class="h4">Response Body</h4>
							<input id="get" type="text" style="height: 35px;width:500px;"> 
						</div>
						<div style="position: relative;margin-left: 30px;border: 1px solid #FFFFFF ;">
							<h4 class="h4">Response Code</h4>
							<input id="get" type="text" style="height: 35px;width:500px;"> 
						</div>
						<div style="position: relative;margin-left: 30px;border: 1px solid #FFFFFF ;">
							<h4 class="h4">Response Headers</h4>
							<input id="get" type="text" style="height: 35px;width:500px;"> 
						</div>
					</div>
				</div>  
			</div>
			<div id="tabs-2" style="width: 225px;">
			</div>
		</div>
    </div>
  </body>
</html>
